<template>
	<view class="other-login d-flex jc-between ai-center">
		<block v-for="(item,index) in providerList" :key="index">
			<view class="icon iconfont" :class="['icon-' + item.icon]" @tap="tologin(item)"></view>
		</block>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				providerList: []
			}
		},
		methods: {
			// 获取登录渠道
			getLoginAuth() {
				uni.getProvider({
					service: 'oauth',
					success: (result) => {
						let tempData = ['weixin', 'qq', 'sinaweibo']
						// this.providerList = result.provider.map((value) => {
						this.providerList = tempData.map((value) => {
							let providerName = '';
							let icon = ""
							switch (value) {
								case 'weixin':
									providerName = '微信登录'
									icon = "weixin"
									break;
								case 'qq':
									providerName = 'QQ登录'
									icon = "QQ"
									break;
								case 'sinaweibo':
									providerName = '新浪微博登录'
									icon = "xinlangweibo"
									break;
							}
							return {
								name: providerName,
								icon: icon,
								id: value
							}
						});
					},
					fail: (error) => {
						console.log('获取登录通道失败', error);
					}
				});
			},
			tologin(provider) {
				uni.showToast({
					title: "暂不支持该功能",
					icon: "none"
				})
				// uni.login({
				// 	provider: provider.id,
				// 	success: (res) => {
				// 		console.log('login success:', res);
				// 		// 更新保存在 store 中的登录状态
				// 		console.log("登录成功,保存到本地,修改状态")
				// 	},
				// 	fail: (err) => {
				// 		console.log('login fail:', err);
				// 	}
				// });
			}
		},
		mounted() {
			this.getLoginAuth()
		}
	}
</script>

<style lang="scss" scoped>
	.other-login {
		padding: 20upx 150upx;

		.icon {
			width: 100upx;
			height: 100upx;
			border-radius: 50%;
			font-size: 55upx;
			line-height: 100upx;
			text-align: center;
			color: #FFFFFF;

			&.icon-weixin {
				background-color: #2BD19B;
			}

			&.icon-xinlangweibo {
				background-color: #FC7729;
			}

			&.icon-QQ {
				background-color: #2CAEFC;
			}
		}
	}
</style>
